<script setup lang="ts">

// props声明和默认值处理
interface Props {
  text?: string
  iconClass?: string,
  imgPath?: string,
  position?: 'left' | 'right',
  size?: 'large' | 'default' | 'small',
}
const props = withDefaults(defineProps<Props>(), {
  position: 'left',
  size: 'default',
})

const hasIcon = computed(() => props.iconClass || props.imgPath)


const extraClass = {
  "ibiz-icon-text--no-icon": !hasIcon.value,
  [`ibiz-icon-text--${props.position}`]: hasIcon.value,
}

</script>

<template>
  <div
    :class="[
      {
        [`ibiz-icon-text--${$props.position}`]: hasIcon,
      },
      `ibiz-icon-text--${$props.size}`,
      'ibiz-icon-text'
    ]"
  >
    <template v-if="$props.position == 'left'">
      <i v-if="$props.iconClass" :class="'ibiz-icon-text__icon ' + $props.iconClass" />
      <img v-else-if="$props.imgPath" class="ibiz-icon-text__icon-img" :src="$props.imgPath" />
    </template>
    <span class="ibiz-icon-text__text" v-if="$props.text">{{ $props.text }}</span>
    <template v-if="$props.position == 'right'">
      <i v-if="$props.iconClass" :class="'ibiz-icon-text__icon ' + $props.iconClass" />
      <img v-else-if="$props.imgPath" class="ibiz-icon-text__icon-img" :src="$props.imgPath" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
// 基线对齐
.ibiz-icon-text__icon,.ibiz-icon-text__icon-img{
  vertical-align: bottom;
}
// 默认大小
.ibiz-icon-text--default{
  font-size: 16px;
  .ibiz-icon-text__icon,.ibiz-icon-text__icon-img{
    width: 16px;
    height: 16px;
  }
}
.ibiz-icon-text--large{
  font-size: 24px;
  .ibiz-icon-text__icon,.ibiz-icon-text__icon-img{
    width: 24px;
    height: 24px;
  }
}
// 位置
.ibiz-icon-text--left .ibiz-icon-text__text{
  margin-left: 5px;
}
.ibiz-icon-text--right .ibiz-icon-text__text{
  margin-right: 5px;
}


</style>